<template>
    <div>
        <div id="maychar1"></div>
        <div id="maychar2"></div>
        <div id="maychar3"></div>
    </div>
</template>

<script lang="js">
import { defineComponent, onMounted, inject, toRefs, watch } from "vue"; // 主要

export default defineComponent({
  props: {
        echartsData:{
            type: Object,
            default: () => ({})
        }
    },
  setup(props,context) {
    const { echartsData } = toRefs(props)

    let echarts = inject("echarts"); // 主要

    watch(()=>echartsData,(newValue,oldValue) => {
      changetype1();
      changetype2();
      changetype3();
    },{deep:true})

    // 期初+收入饼图
    let machart1;
    const changetype1 = () => {
      // 获取组件实例
      if (machart1 != null && machart1 != "" && machart1 != undefined){
        machart1.dispose();
      }
      machart1 = echarts.init(document.getElementById("maychar1"), null, {width:486,height:560});
      // 设置配置项
      const option = {
        title: {
          text: '期初+收入',
          left: 'center',
          top: 320
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}({c})'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          selected: {'用于定向支出的收入项目':false},
          data: [
            {name:'上级转移支付资金',icon:'roundRect'},
            {name:'本月收入（含政府性基金收入）',icon:'roundRect'},
            {name:'期初库款余额',icon:'roundRect'},
            {name:'发债收入',icon:'roundRect'},
            {name:'用于定向支出的收入项目',icon:'roundRect'},
            {name:'    其中:新增专项债券(转贷)收入',icon:'roundRect'},
            {name:'    再融资债券(转贷)收入',icon:'roundRect'},
          ]
        },
        series: [
          {
            type: 'pie',
            data: echartsData.value.data1 ? echartsData.value.data1 : [],
            radius: ['0%', '50%'],
            center: ["50%", "60%"],
            label: {
              show: true,
              position: "outside",// outside/inside
              // formatter: '{b}({d})%' //自定义显示格式(b:name, c:value, d:百分比)
              formatter: (params) => {
                // if(params.percent == 0){
                //   params.percent=''
                //   return params.percent
                // }
                if (params.name !== '') {
                  return `${params.name}` + `\n${params.percent === undefined ? 0 : params.percent}%`
                }
                return ''
              }
            },
          }
        ]
      };
      // 赋值
      machart1.setOption(option);
      // 图例点击事件
      machart1.on('legendselectchanged', function(params) {
        let { name, selected } = params;
        if(name == '用于定向支出的收入项目') {
          let flag = selected[name];
          if(flag) {
            option.legend['selected']['用于定向支出的收入项目'] = true;
            option.legend['selected']['    其中:新增专项债券(转贷)收入'] = false;
            option.legend['selected']['    再融资债券(转贷)收入'] = false;
          }else {
            option.legend['selected']['用于定向支出的收入项目'] = false;
          }
        }
        if(name == '    其中:新增专项债券(转贷)收入') {
          let flag = selected[name];
          if(flag) {
            option.legend['selected']['    其中:新增专项债券(转贷)收入'] = true;
            option.legend['selected']['用于定向支出的收入项目'] = false;
          }else {
            option.legend['selected']['    其中:新增专项债券(转贷)收入'] = false;
          }
        }
        if(name == '    再融资债券(转贷)收入') {
          let flag = selected[name];
          if(flag) {
            option.legend['selected']['    再融资债券(转贷)收入'] = true;
            option.legend['selected']['用于定向支出的收入项目'] = false;
          }else {
            option.legend['selected']['    再融资债券(转贷)收入'] = false;
          }
        }
        machart1.setOption(option);
      })
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        machart1.resize();
      });
    };
    // 支出饼图
    let machart2;
    const changetype2 = () => {
      // 获取组件实例
      if (machart2 != null && machart2 != "" && machart2 != undefined){
        machart2.dispose();
      }
      machart2 = echarts.init(document.getElementById("maychar2"), null, {width:486,height:560});
      // 设置配置项
      const option = {
        title: {
          text: '支出',
          left: 'center',
          top: 320
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}({c})'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          selected: {'三保支出预算数':false},
          data: [
            {name:'对下转移性支出',icon:'circle'},
            {name:'还本付息支出计划数',icon:'circle'},
            {name:'三保支出预算数',icon:'circle'},
            {name:'    其中：三保支出（除工资）',icon:'circle'},
            {name:'    其中：工资支出预算数',icon:'circle'},
            {name:'刚性支出',icon:'circle'},
            {name:'定向支出',icon:'circle'},
          ]
        },
        series: [
          {
            type: 'pie',
            data: echartsData.value.data2 ? echartsData.value.data2 : [],
            radius: ['0%', '50%'],
            center: ["50%", "60%"],
            label: {
              show: true,
              position: "outside",// outside/inside
              // formatter: '{b}({d})%' //自定义显示格式(b:name, c:value, d:百分比)
              formatter: (params) => {
                if (params.name !== '') {
                  return `${params.name}` + `\n${params.percent === undefined ? 0 : params.percent}%`
                }
                return ''
              }
            },
          }
        ]
      };
      // 赋值
      machart2.setOption(option);
      // 图例点击事件
      machart2.on('legendselectchanged', function(params) {
        let { name, selected } = params;
        if(name == '三保支出预算数') {
          let flag = selected[name];
          if(flag) {
            option.legend['selected']['三保支出预算数'] = true;
            option.legend['selected']['    其中：三保支出（除工资）'] = false;
            option.legend['selected']['    其中：工资支出预算数'] = false;
          }else {
            option.legend['selected']['三保支出预算数'] = false;
          }
        }
        if(name == '    其中：三保支出（除工资）') {
          let flag = selected[name];
          if(flag) {
            option.legend['selected']['    其中：三保支出（除工资）'] = true;
            option.legend['selected']['三保支出预算数'] = false;
          }else {
            option.legend['selected']['    其中：三保支出（除工资）'] = false;
          }
        }
        if(name == '    其中：工资支出预算数') {
          let flag = selected[name];
          if(flag) {
            option.legend['selected']['    其中：工资支出预算数'] = true;
            option.legend['selected']['三保支出预算数'] = false;
          }else {
            option.legend['selected']['    其中：工资支出预算数'] = false;
          }
        }
        machart2.setOption(option);
      })
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        machart2.resize();
      });
    };
    // 柱图
    let machart3;
    let option3;
    const changetype3 = () => {
      // 获取组件实例
      if (machart3 != null && machart3 != "" && machart3 != undefined){
        machart3.dispose();
      }
      machart3 = echarts.init(document.getElementById("maychar3"), null, {width:960,height:400});
      // 设置配置项
      option3 = {
        tooltip: {
          // trigger: 'axis',
          trigger: 'item',
        },
        grid: {
          // top:100,
          left: 360,
          right:320
        },
        legend: {
            orient: 'vertical',// vertical/horizontal
            left: 'left',
            selected: {'用于定向支出的收入项目':false,'三保支出预算数':false},
            data: [
                {name:'上级转移支付资金',icon:'roundRect'},
                {name:'本月收入（含政府性基金收入）',icon:'roundRect'},
                {name:'期初库款余额',icon:'roundRect'},
                {name:'发债收入',icon:'roundRect'},
                {name:'用于定向支出的收入项目',icon:'roundRect'},
                {name:'    其中:新增专项债券(转贷)收入',icon:'roundRect'},
                {name:'    再融资债券(转贷)收入',icon:'roundRect'},
                {name:'对下转移性支出',icon:'circle'},
                {name:'还本付息支出计划数',icon:'circle'},
                {name:'三保支出预算数',icon:'circle'},
                {name:'    其中：三保支出（除工资）',icon:'circle'},
                {name:'    其中：工资支出预算数',icon:'circle'},
                {name:'刚性支出',icon:'circle'},
                {name:'定向支出',icon:'circle'}],
        },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        xAxis: [
          {
            type: 'category',
            name: '日期',
            data: ['']
          }
        ],
        yAxis: [
          {
            name: '金额',
            type: 'value'
          }
        ],
        series: echartsData.value.data3
      };
      // 赋值
      machart3.setOption(option3,{
        notMerge: true, //不和之前的option合并
      });
      // 图例点击事件
      machart3.on('legendselectchanged', function(params) {
        let { name, selected } = params;
        if(name == '用于定向支出的收入项目') {
          let flag = selected[name];
          if(flag) {
            option3.legend['selected']['用于定向支出的收入项目'] = true;
            option3.legend['selected']['    其中:新增专项债券(转贷)收入'] = false;
            option3.legend['selected']['    再融资债券(转贷)收入'] = false;
          }else {
            option3.legend['selected']['用于定向支出的收入项目'] = false;
          }
        }
        if(name == '    其中:新增专项债券(转贷)收入') {
          let flag = selected[name];
          if(flag) {
            option3.legend['selected']['    其中:新增专项债券(转贷)收入'] = true;
            option3.legend['selected']['用于定向支出的收入项目'] = false;
          }else {
            option3.legend['selected']['    其中:新增专项债券(转贷)收入'] = false;
          }
        }
        if(name == '    再融资债券(转贷)收入') {
          let flag = selected[name];
          if(flag) {
            option3.legend['selected']['    再融资债券(转贷)收入'] = true;
            option3.legend['selected']['用于定向支出的收入项目'] = false;
          }else {
            option3.legend['selected']['    再融资债券(转贷)收入'] = false;
          }
        }

        if(name == '三保支出预算数') {
          let flag = selected[name];
          if(flag) {
            option3.legend['selected']['三保支出预算数'] = true;
            option3.legend['selected']['    其中：三保支出（除工资）'] = false;
            option3.legend['selected']['    其中：工资支出预算数'] = false;
          }else {
            option3.legend['selected']['三保支出预算数'] = false;
          }
        }
        if(name == '    其中：三保支出（除工资）') {
          let flag = selected[name];
          if(flag) {
            option3.legend['selected']['    其中：三保支出（除工资）'] = true;
            option3.legend['selected']['三保支出预算数'] = false;
          }else {
            option3.legend['selected']['    其中：三保支出（除工资）'] = false;
          }
        }
        if(name == '    其中：工资支出预算数') {
          let flag = selected[name];
          if(flag) {
            option3.legend['selected']['    其中：工资支出预算数'] = true;
            option3.legend['selected']['三保支出预算数'] = false;
          }else {
            option3.legend['selected']['    其中：工资支出预算数'] = false;
          }
        }
        machart3.setOption(option3);
      })
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        machart3.resize();
      });
    };

    onMounted(() => {
      changetype1();
      changetype2();
      // changetype3()
    });

    return {};
  },
});
</script>

<style lang="less" scoped></style>
